<template>
  <div class="banner">
    <!-- <div class="banner-top">
      <div>工作面板</div>
      <div @click="selectDate(2)">{{currentUser}}
        <i class="cubeic-pulldown" v-if="!showUser"></i>
        <i class="cubeic-pullup" v-else></i>
      </div>
      <div @click="selectDate(0)">{{currentDate}}
        <i class="cubeic-pulldown" v-if="!showDate"></i>
        <i class="cubeic-pullup" v-else></i>
      </div>
    </div> -->
    <!-- <div style="border-bottom: solid 4px #f7f7f7;"></div> -->
    <div class="banner-top">
      <div class="condition">
        <i class="iconfont icon-sousuo iconSty"></i>
        <span>搜索</span>
      </div>
      <div class="condition" @click="selectSort()">
        <i class="iconfont icon-paixu iconSty"></i>
        <span>排序</span>
      </div>
      <div class="condition" @click="selectScreen()">
        <i class="iconfont icon-shaixuan iconSty"></i>
        <span>筛选</span>
      </div>
    </div>
    <div class="down-div" v-show="showSort">
      <div class="sort-content">
        <div class="sort-div">
          <span style="font-weight: 700 !important">排序方式</span>
          <div class="main-color">
            <i class="cubeic-setting"></i>设置默认123
          </div>
        </div>
        <div class="sort-div1">
          <div class="sort-li" style="width: 100%; display: flex; justify-content: space-between;"
            v-for="(op, index) in orderByList" :key="index">
            <div :style="{width: isShowSetDefaultSort ? 'calc(100% - 60px)' : 'calc(100% - 30px)'}">{{op.value}}</div>
            <div :style="{width: isShowSetDefaultSort ? '60px' : '30px'}" style="text-align: right">
              <span class="main-color" :style="{color: '#008C0E !important', 'fontSize': '12px'}">设为默认</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="zhezhao" @click="selectOther()" v-show="showOther"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: '测试数据',
      showUser: false,
      showDate: false,
      currentDate: '本月', // 默认
      currentUser: '全公司', // 默认,
      showSort: false,
      showScreen: false,
      showOther: false,
      isShowSetDefaultSort: true,
      orderByList: [
        {value: '产品编码升序', id: 1},
        {value: '产品编码降序', id: 2},
        {value: '名字编码升序', id: 3},
        {value: '名字编码降序', id: 4},
        {value: '星石编码升序', id: 5},
        {value: '星石编码降序', id: 6}
      ]
    }
  },
  methods: {
    selectDate (type, index = '') {
      console.log('index', index)
      /* type=0：显示日期筛选项或隐藏
      *  type=1：左边日期筛选项的tab切换
      *  type=3：确定的点击
      *  type=2: 显示部门成员或隐藏
      *  type=4: 左边部门成员的tab切换
      *  type=6: 点击部门成员
      */
      if (type === 0) {
        // console.log(type, index)`
        // 部门成员是否隐藏
        if (!this.showUser) {
          // 遮照
          this.showZhazhao = !this.showZhazhao
        }
        // 部门成员隐藏
        this.showUser = false
        // 显示日期筛选项或隐藏
        this.showDate = !this.showDate
      }
      if (type === 2) {
        // 日期筛选项是否隐藏
        if (!this.showDate) {
          // 遮照
          this.showZhazhao = !this.showZhazhao
        }
        // 日期筛选项隐藏
        this.showDate = false
        // 显示部门成员或隐藏
        this.showUser = !this.showUser
      }
    },
    selectSort () {
      this.showSort = !this.showSort
      this.showOther = !this.showOther
    },
    selectScreen () {
      this.showScreen = !this.showScreen
      this.showOther = !this.showOther
    },
    selectOther() {
      this.showOther = !this.showOther
      this.showScreen = false
      this.showSort = false
    }
  }
}
</script>
<style lang="stylus">
  .banner {
    margin-top: 16px;
    border-bottom: 1px solid #f0f0f0;
    .banner-top {
      background-color: #eee;
      width: 100%;
      display: flex;
      justify-content: space-between;
      color: #666;
      padding: 14px 10px;
    }
    .down-div{
      position: absolute;
      width: 99.5%;
      z-index: 1004;
      background-color: white;
      border-left: 1px solid #f7f7f7;
      border-right: 1px solid #f7f7f7;
      border-bottom: 1px solid #f7f7f7;
      .btn-div{
        display: flex;
        padding: 10px;
        justify-content: space-around;
        border-top: 1px solid #f7f7f7;
      }
      .sort-content{
        max-height: 293px;
        text-align: left;
        width: 100%;
        .sort-div {
          color: #333;
          padding: 0 5%;
          background-color: white;
          line-height: 40px;
          border-bottom: 1px solid #f7f7f7;
          display: flex;
          justify-content: space-between;
          flex-direction: row;
        }
        .sort-div1{
          display: flex;
          flex-wrap: wrap;
          max-height: 252px;
          overflow-y: auto;
          .sort-li {
            border-bottom: 1px solid #f7f7f7;
          }
          .options-active {
            background-color: #008C0E;
            color: #fff;
          }
          div {
            padding: 0 2.5%;
            line-height: 40px;
          }
          .time-color {
            color: #c2c2c2;
          }
        }
        .options-div{
          display: flex;
          flex-wrap: wrap;
          .options-active {
            background-color: #008C0E;
            color: #fff;
          }
          div {
            border: 1px solid #ccc;
            margin-bottom: 10px;
            margin-right: 2.6%;
            width: 26%;
            padding: 2%;
            text-align: center;
          }
          .time-color {
            color: #d3d3d3;
          }
        }
      }
    }
    .zhezhao {
      width: 100%;
      position: fixed;
      bottom: 0;
      z-index: 1002;
      background-color: rgba(0, 0, 0, 0.4);
      height: calc(100% - 143px);
    }
  }
</style>